import { _decorator, Component, instantiate, Node, RichText, SpriteFrame, Tween, tween, UITransform, v3 } from 'cc';
import Config from '../../manager/config.manager';
import GameDC from '../../manager/data.game.center';
import GameAssets from '../../manager/game.assets';
//import { RichTextCheck } from '../../../A-FRAME/component/richtext.check';
const { ccclass, property } = _decorator;

@ccclass('LivecommentBlock')
export class LivecommentBlock extends Component {
	@property(UITransform)
	private view: UITransform = null;
	@property([SpriteFrame])
	private channel_sframe: SpriteFrame[] = [];

	private channel_smap: Map<string, SpriteFrame>;

	private item_demo: Node;
	private curr_token: string;

	private prms_inited: Promise<'end'>;

	protected onLoad(){
		this.init();
	}

	protected onEnable(){
		this.prms_inited.then(()=>this.refresh());
	}

	private init(){
		this.channel_smap = new Map(this.channel_sframe.map(sframe=>[sframe.name, sframe]));
		this.item_demo = this.view.node.children[0];
		this.view.node.removeAllChildren();
		this.initRender();
	}

	private initRender(){
		let item_height = this.item_demo.getComponent(UITransform).height;

		let count = 2;

		let list = GameDC.getLiveComments(count);

		this.prms_inited = list.forWait(async (data, i)=>{
			let node = instantiate(this.item_demo);
			node.setParent(this.view.node);
			node.setPosition(0, -i * item_height, node.position.z);

			this.renderItem(node, data);
		});
	}

	private renderItem(node: Node, data: ReturnType<typeof GameDC.getLiveComments>[number]){
		node.name = [data.nickname, data.count, data.symbol].join('-');
		let richtext = node.getChildByName('richtext').getComponent(RichText);
		richtext.string = GameAssets.getLangText(13,
			'<color=#83FF72>' + data.nickname + '</color>',
			'<color=#FFBF25>',
			data.count,
			'</color>',
			'<color=#FF0505>' + Config.symbolString(data.symbol) + '</color>',
		);
		mtec.cc.skinPeeler(node.getChildByName('icon'), this.channel_smap.get(data.channel), {width: true});

		//return richtext.getComponent(RichTextCheck).forceAdatptFontSize(true);
		richtext.node.active = true;
	}

	private refresh(){
		if(this.curr_token) this.curr_token = mtec.string.randomToken(3, 36, t=>t!=this.curr_token);
		else this.curr_token = mtec.string.random(3, 36);

		this.showNext();
	}

	private async showNext(){
		let token = this.curr_token;
		let [curr_item, next_item] = [...this.view.node.children].sort((a, b)=>b.position.y - a.position.y);
		let list = GameDC.getLiveComments();
		let next_index = list.findIndex(el=>[el.nickname, el.count, el.symbol].join('-')==curr_item.name) + 1;
		next_index = next_index % list.length;
		this.renderItem(next_item, list[next_index]);

		let duration = 1;

		let [tw_curr, tw_next] = [curr_item, next_item].map((node, i)=>{
			Tween.stopAllByTarget(node);
			let ui = node.getComponent(UITransform);
			return tween(node)
			.to(duration, {position: v3(node.position.x, (1-i) * ui.height, node.position.z)})
		});

		tw_next.start();
		tw_curr.call(()=>{
			let ui = curr_item.getComponent(UITransform);
			curr_item.setPosition(curr_item.position.x, -ui.height, curr_item.position.z);
			this.scheduleOnce(()=>this.curr_token==token ? this.showNext() : void 0, 1.5);
		}).start();
	}
}

